<!-- item template -->
<script type="text/x-template" id="list-template">
	<div id="bodyFrame"  xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
		<div id="topBody">
			<div class="row rowSet" style="border-bottom: 1px solid gainsboro;">
				<nav class="navbar " role="navigation" style="margin: 0px;padding: 0px;border-radius: 0px;background-color: rgb(240,240,240)">
					<div class="navbar-header">
						<a class="navbar-brand" href="#">{{title}}</a>
					</div>
					<div>
						<ul class="nav navbar-nav navbar-right" style="margin: 0px;padding: 5px">
							<li><button  :class="['btn','btn-default',{'active':queryFlag}]" style="margin-right: 10px" @click="querySwitch()">查询</button></li>
							<li><button  class="btn btn-primary" style="margin-right: 10px" @click="jumpToEdit()" >新增</button></li>
							<!--动态调整列显示-->
							<li class="dropdown">
								<button  class="dropdown-toggle btn btn-default" data-toggle="dropdown">列<b class="caret"></b></button>
								<ul class="dropdown-menu autoDiv">
									<li v-for='item in initListPageDto.columnItemDtoList'>
										<a href="#"> <input type="checkbox" v-model="item.showFlag" />{{item.title}}</a>
									</li>
								</ul>
							</li>
						</ul>
					</div>
				</nav>
			</div><!-- /.row -->
			<div class="row rowSet" style="padding: 10px 0px 0px 0px;" v-show="queryFlag">
				<!--查询条件-->
				<template v-for="(item, index) in initListPageDto.queryItemDtoList" >
					<div class="form-group col-sm-3" style="margin-bottom: 5px;">
						<label v-bind:for="'inputFile'+index" class="col-sm-4 control-label" style="text-align: right;padding-right: 5px;">{{item.title}}:</label>
						<div class="col-sm-8" v-if="item.type == 2">
							<!-- 渲染字典列表 -->
							<select   v-model="requestDto[item.fieldName]"  class="form-control" v-bind:id="'inputFile'+index"  >
								<option value="null" selected>全部</option>
								<template v-for="dictItem in initListPageDto.dict[item.dictCodeType].list" >
									<option v-bind:value="dictItem.codeCode">{{dictItem.codeValue }}</option>
								</template>
							</select>
						</div>
						<!--日期-->
						<div class="col-sm-8"  v-if="item.type == 3" >
							<input type="date"  v-model="requestDto[item.fieldName]"   class="form-control" v-bind:id="'inputFile'+index" />
						</div>
						<!--普通控件-->
						<div class="col-sm-8" v-if="item.type == 0">
							<input type="text"  v-model="requestDto[item.fieldName]"   class="form-control" v-bind:id="'inputFile'+index" />
						</div>
					</div>
				</template>
				<div class="form-group col-sm-12" align="right" style="margin-bottom: 5px;">
					<button type="button" v-on:click="queryClick" class="btn btn-primary ">查询</button>
				</div>
			</div><!-- /.row -->
		</div>

		<div id="centerBody" class="panel panel-default">
			<div class="panel panel-default" style="margin: 0px;padding: 0px;border: 0px">
				<!--列表渲染-->
				<table class="table table-condensed" style="margin: 0px;padding: 0px;">
					<thead>
						<tr>
							<template v-for='item in initListPageDto.columnItemDtoList'>
								<th v-show="item.showFlag == true">{{item.title}}</th>
							</template>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
					<tr v-for="item in responseDtoList">
						<template v-for='it in initListPageDto.columnItemDtoList'>
							<td v-show='it.showFlag == true'>
								<!--普通-->
								<template v-if="it.type == 0" >
									{{item[it.fieldName]}}
								</template>
								<!--图片-->
								<img v-if="it.type == 1" :src="$ImageUrl(item[it.fieldName],'small')"   class="img-thumbnail"  width="150px"/>
								<!--字典 翻译-->
								<template v-if="it.type == 2" >
									{{initListPageDto.dict[it.dictCodeType].map[item[it.fieldName]]}}
								</template>
								<!--日期-->
								<template v-if="it.type == 3" >
									{{$formatDate('yyyy-MM-dd hh:mm:ss',item[it.fieldName])}}
								</template>
							</td>
						</template>
						<td>
							<button type="button" class="btn btn-link" v-on:click="edit(item)">编辑</button>
							<template v-for="name in lineEvent" >
								<button type="button" class="btn btn-link" v-on:click="event(item,name)">{{name}}</button>
							</template>
						</td>
					</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div  id="bottomBody" style="padding-top: 5px;padding-left: 15px">
			<!--加载分页-->
			<ul class="pagination" style="margin: 0px">
				<li :class="pageNo == 1 ? 'disabled' : '' ">
					<a href="#" v-on:click="pageClick(pageNo-1)">&laquo;</a>
				</li>
				<li v-for="i in pageLength" :class="pageNo == i ? 'active' : '' ">
					<a href="#"  v-on:click="pageClick(i)">{{i}}</a>
				</li>
				<li :class="pageNo == pageLength ? 'disabled' : '' ">
					<a href="#"  v-on:click="pageClick(pageNo+1)">&raquo;</a>
				</li>
			</ul>
			总计<span class="badge">{{dataCount}}</span>条，每页<span class="badge">{{limit}}</span>条
		</div>
	</div>
</script>
<script>
	// 注册item列表控件 父组件
	Vue.component('listComponent', {
		template: '#list-template',
		props:['title','initUrl','lineEvent','watchChild'],
		//模板数据
		data: function () {
			return {
				queryFlag : false,
				initListPageDto : {},
				//查询请求的对象
				requestDto:{},
				//返回的对象列表
				responseDtoList:[],
				pageNo:1,    //当前页码
				limit:10,    //每页条数
				pageLength:0, //总页数
				dataCount:0,//总条数
				isSend:false //分页查询的点击状态
			}
		},
		methods: {
			init:function () {
				var that = this;
				this.$send(Vue.prototype.getUrl(this.initUrl),null,function(data){
					that.initListPageDto = data;
					that.query();
				});
			},
			//切换查询标志
			querySwitch: function () {
				this.queryFlag = !this.queryFlag;
				setTimeout(function() {
					console.log('刷新框架');
					reSizeBodyFrame();
				},50);
			},
			jumpToEdit:function() {
				//加载页面
				loadPageToBodyMain(this.initListPageDto.editUrl);
			},
			//点击查询按钮时候
			queryClick:function(){
				this.pageNo =1;
				this.query();
			},
			//点击查询按钮时候
			query:function(){
				//对空字符串进行处理
				for(var key in this.requestDto) {
					if (this.requestDto[key] == 'null'){
						this.requestDto[key] = null;
					}
				}
				console.log('query start!! ');
				var that = this;
				var url = Vue.prototype.getUrl(this.initListPageDto.queryUrl) + '?pageNo='+this.pageNo+'&limit='+this.limit;
				console.log(JSON.stringify(this.requestDto));
				this.$send(url,this.requestDto,function(data){
					console.log('查询成功！！');
					that.responseDtoList = data.dataList;
					that.dataCount = data.dataCount;
					that.pageLength = data.pageLength;
				});
			},
			//点击编辑的时候
			edit:function (item) {
				sessionStorage.editId=item.id;
				//跳转
				this.jumpToEdit();
			},
			//点击其他按钮时
			event:function (item,name) {
				console.log('父组件!');
				//this.$emit('eventCallBack',item,name);
				this.watchChild(item,name);
			},
			/**
			 * 当控件触发按钮时
			 */
			pageClick: function (i) {
				this.setNowPageNo(i);
				//触发引用的控件的方法
				if(this.isSend){
					this.isSend =false; //清除状态
					this.query();
				}
			},
			/**
			 * 根据点击的序号更新页码
			 * @param i
			 */
			setNowPageNo:function(i){
				if(i<1){
					i=1;
				}else if(i>this.pageLength){
					i = this.pageLength;

				}else if(i != this.pageNo){
					this.isSend = true;
				}
				this.pageNo  = i ; // 设置当前页号
			},
		},
		created: function () {
			this.init();
		},
	});

</script>
